<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <meta name="format-detection" content="telephone=no" />
    <meta name="format-detection" content="email=no" />
    <title>订单详情</title>
    <link rel="stylesheet" href="../../css/api.css">
    <link rel="stylesheet" href="../../css/vant.css">
    <link rel="stylesheet" href="../../css/main.css">
    <style>
        .order-detail-btn div{
            padding: 0 .12rem;
        }

    </style>
</head>

<body>
    <div class="app" v-cloak>
        <div class="iphonex-padding-bottom">
            <div class="cart-detail-area">
                <div class="top">
                    <div>
                        <div class="title">
                            <span>{{userOrderDetail.consignee}}</span>
                            <span>{{userOrderDetail.phone}}</span>
                        </div>
                        <div>{{userOrderDetail.areaName}} {{userOrderDetail.address}}</div>
                    </div>
                </div>
            </div>
            <div class="cart-detail-order-list">
                <div class="cart-detail-order-item">
                    <div>{{userOrderDetail.shopName}}</div>
                    <div v-for="(item,index) in userOrderDetail.orderItems" :key="index">
                        <div class="cart-detail-order-info flex-x-s">
                            <div class="img">
                                <img :src="item.imageUrl?item.imageUrl:'https://zzzzkj.oss-cn-shanghai.aliyuncs.com/static/tiexie/app/image/image/default/loading3.png'" alt="">
                            </div>
                            <div class="info">
                                <div class="title">{{item.name}}</div>
                                <div class="money"><span>¥</span> {{Number(item.price).toFixed(2)}}</div>
                            </div>
                            <div>× {{item.quantity}}</div>
                        </div>
                        <div class="cart-detail-order-discount flex-x-sb">
                            <div class="cart-detail-order-discount-info">
                                <span>商品优惠</span>
                            </div>
                            <div>- ¥ {{Number(item.discount).toFixed(2)}}</div>
                        </div>
                    </div>
                    <div class="cart-detail-order-discount flex-x-sb">
                        <div class="cart-detail-order-discount-info">
                            <span>店铺优惠</span>
                        </div>
                        <div>- ¥ {{Number(userOrderDetail.shopDiscount).toFixed(2)}}</div>
                    </div>
                    <div class="cart-detail-order-discount flex-x-sb">
                        <div class="cart-detail-order-discount-info">
                            <span>平台优惠</span>
                        </div>
                        <div>- ¥ {{Number(userOrderDetail.platformDiscount).toFixed(2)}}</div>
                    </div>
                    <div class="cart-detail-order-total">
                        总计：¥ {{(Number(userOrderDetail.orderAmount) ).toFixed(2)}}
                    </div>
                </div>
            </div>
            <div class="cart-order-info">
                <div class="cart-order-info-title flex-x-sb">
                    <div>订单信息</div>
                    <div>{{userOrderDetail.statusText}}</div>
                </div>
                <div class="cart-order-info-item flex-x-s">
                    <div>订单号</div>
                    <div>{{userOrderDetail.sn}}</div>
                </div>
                <div class="cart-order-info-item flex-x-s">
                    <div>创建时间</div>
                    <div>{{userOrderDetail.createTime | handleTime}}</div>
                </div>
                <div class="cart-order-info-item flex-x-s" v-if="userOrderDetail.paidTime">
                    <div>支付时间</div>
                    <div>{{userOrderDetail.paidTime | handleTime}}</div>
                </div>
            </div>
            <div class="order-detail-btn">
                <div v-show="userOrderDetail.returnLogisticsEnabled" @click.stop="changeLogistics(userOrderDetail.id, 1)">退货物流</div>
                <div v-show="userOrderDetail.changeLogisticsEnabled" @click.stop="changeLogistics(userOrderDetail.id, 1)">换货物流</div>

                <div v-show="userOrderDetail.cancelChangeEnabled" @click.stop="operateOrder('确认取消换货？', 'cancelChange', userOrderDetail.id, '取消成功')">取消换货</div>
                <div v-show="userOrderDetail.cancelRefundEnabled" @click.stop="operateOrder('确认取消退款？', 'cancelRefund', userOrderDetail.id, '取消成功')">取消退款</div>
                <div v-show="userOrderDetail.cancelReturnEnabled" @click.stop="operateOrder('确认取消退货？', 'cancelReturn', userOrderDetail.id, '取消成功')">取消退货</div>

                <div v-show="userOrderDetail.changeEnabled" @click.stop="operateOrder('确认申请换货？', 'applyChange', userOrderDetail.id, '提交成功')">换货</div>
                <div v-show="userOrderDetail.returnEnabled" @click.stop="operateOrder('确认申请退货？', 'applyReturn', userOrderDetail.id, '提交成功')">退货</div>
                <div v-show="userOrderDetail.refundEnabled" @click.stop="operateOrder('确认申请退款？', 'applyRefund', userOrderDetail.id, '提交成功')">退款</div>

                <div v-show="userOrderDetail.logisticsEnabled" @click.stop="viewLogistics(userOrderDetail.id, 0)">查看物流</div>

                <div v-show="userOrderDetail.payEnabled" @click.stop="doOrder('付款',userOrderDetail.id)">付款</div>

                <div v-show="userOrderDetail.receiptEnabled" @click.stop="operateOrder('确认收货？', 'receiptOrder', userOrderDetail.id, '收货成功')">确认收货</div>
                <div v-show="userOrderDetail.removeEnabled" @click.stop="operateOrder('确认删除订单？', 'deleteUserOrder', userOrderDetail.id, '删除成功')">删除订单</div>
                <div v-show="userOrderDetail.cancelEnabled" @click.stop="operateOrder('确认取消订单？', 'cancelOrder', userOrderDetail.id, '取消成功')">取消订单</div>
            </div>
            <van-popup v-model="showPay" closeable round position="bottom" :style="{ height: '40%' }">
                <div class="pay-method">
                    <div class="money"><span>¥</span>{{(Number(userOrderDetail.orderAmount)).toFixed(2)}}</div>
                    <div>付款方式</div>
                    <div class="wx-pay flex-x-sb" @click="selectPayMethod(0)">
                        <div class="flex-x-s">
                            <img src="https://zzzzkj.oss-cn-shanghai.aliyuncs.com/static/tiexie/app/image/image/cart/wxpay.png" alt="">
                            <span>微信支付</span>
                        </div>
                        <img class="selectImg" :src="payMethod===0?'https://zzzzkj.oss-cn-shanghai.aliyuncs.com/static/tiexie/app/image/image/cart/select.png':'https://zzzzkj.oss-cn-shanghai.aliyuncs.com/static/tiexie/app/image/image/cart/no-select.png'" alt="">
                    </div>
                    <div class="wx-pay flex-x-sb" @click="selectPayMethod(3)">
                        <div class="flex-x-s">
                            <img src="https://zzzzkj.oss-cn-shanghai.aliyuncs.com/static/tiexie/app/image/image/cart/zfbpay.png" alt="">
                            <span>支付宝</span>
                        </div>
                        <img class="selectImg" :src="payMethod===3?'https://zzzzkj.oss-cn-shanghai.aliyuncs.com/static/tiexie/app/image/image/cart/select.png':'https://zzzzkj.oss-cn-shanghai.aliyuncs.com/static/tiexie/app/image/image/cart/no-select.png'" alt="">
                    </div>
                    <div class="pay" @click="payOrders">立即支付</div>
                </div>
            </van-popup>
        </div>
    </div>
    <script src="../../script/api.js"></script>
    <script src="../../script/flexible.js"></script>
    <script src="../../script/vue.min.js"></script>
    <script src="../../script/iconfont.js"></script>
    <script src="../../script/fastclick.js"></script>
    <script src="../../script/vant.min.js"></script>
    <script src="../../script/common.js"></script>
    <script src="../../script/restful.js"></script>
    <script src="../../script/businessCommon.js"></script>

    <script>
        apiready = function() {
            vm = new Vue({
                el: '.app',
                data: {
                    show: false,
                    addr: {},
                    orderId:api.pageParam.orderId,
                    userOrderDetail:{
                        shopDiscount: '',
                        platformDiscount: '',
                        productDiscount: '',
                        totalAmount: '',
                        orderAmount: ''
                    },
                    showPay:false,
                    payMethod:0,
                    checkStatus:false,
                },
                filters: {
                    handleTime(timestamp) {
                        if (!timestamp) {
                            return ''
                        }
                        var date = new Date(timestamp);
                        Y = date.getFullYear();
                        M = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1);
                        D = (date.getDate() < 10 ? '0' + (date.getDate()) : date.getDate())
                        h = (date.getHours() < 10 ? '0' + (date.getHours()) : date.getHours());
                        m = (date.getMinutes() < 10 ? '0' + (date.getMinutes()) : date.getMinutes());
                        s = (date.getSeconds() < 10 ? '0' + (date.getSeconds()) : date.getSeconds());
                        return Y + '.' + M + '.' + D + ' ' + h + ':' + m + ':' + s
                    }
                },
                created() {
                    $api.fixTabBar($api.dom(".order-detail-btn"))
                    $api.fixTabBar($api.dom(".pay-method"))
                },
                mounted() {
                    this.getUserOrderDetail()
                },
                methods: {
                    // 获取订单详情
                    getUserOrderDetail(){
                        var vm = this;
                        order('getUserOrderDetail')(vm.orderId,function(ret){
                            vm.userOrderDetail = ret.data
                            console.log("我的订单详情："+JSON.stringify(ret))
                        })
                    },
                    /**
                     *点击付款
                     */
                    doOrder(toastText) {
                        this.showPay = true
                    },
                    // 选择支付方式
                    selectPayMethod(type){
                        this.payMethod = type
                    },
                    // 订单支付
                    payOrders(){
                        var param = {
                            id:this.userOrderDetail.id,
                            payMethod:this.payMethod,
                        }
                        vm.checkStatus = false
                        order('payOrders')(param,function(ret){
                            console.log("订单支付："+JSON.stringify(ret))
                            vm.checkStatus = false
                            vm.checkOrderStatusTimer = setInterval(()=>{
                                vm.checkOrderStatus(ret.data.paymentSn)
                            },30)
                        })
                    },
                    // 检查支付状态
                    checkOrderStatus(sn){
                        var vm = this;
                        order('checkOrderStatus')(sn,function(ret){
                            if(ret.data.status === 'WAIT_PAY'){
                                // 成功
                                clearInterval(vm.checkOrderStatusTimer)
                                api.hideProgress();
                                vm.showPay = false;
                                // 订单成功 调微信和支付宝
                                if(!vm.checkStatus){
                                    vm.checkStatus = true
                                    if(vm.payMethod == 0){
                                        // 微信
                                        vm.wxPay(ret.data.wxPayAppOrderResult)
                                    }else if (vm.payMethod == 3){
                                        // 支付宝
                                        vm.aliPay(ret.data.aliPayBody)
                                    }
                                }
                            }else if (ret.data.status === 'PRE_PAY_FAIL'){
                                // 失败
                                clearInterval(vm.checkOrderStatusTimer)
                                api.hideProgress();
                                vm.showPay = false;
                                toastMiddle('创建订单失败')
                            }
                        })
                    },
                    //微信支付
                    wxPay:function(data){
                        var vm = this;
                        var wxPayPlus = api.require('wxPayPlus');
                        wxPayPlus.payOrder({
                            apiKey: data.appId,
                            orderId: data.prepayId,
                            mchId: data.partnerId,
                            nonceStr: data.nonceStr,
                            timeStamp: data.timeStamp,
                            package: data.packageValue,
                            sign: data.sign
                        }, function(ret, err) {
                            if (ret.status) {
                                vm.paySuccess()
                            } else {
                                vm.payFail();
                            }
                        });
                    },
                    //支付宝支付
                    aliPay:function(data){
                        var vm = this
                        var aliPayPlus = api.require('aliPayPlus');
                        aliPayPlus.payOrder({
                            orderInfo: data
                        }, function(ret, err) {
                            if(ret.code==9000){
                                vm.paySuccess()
                            }else {
                                vm.payFail()
                            }
                        });
                    },
                    //付款成功后的状态
                    paySuccess:function(){
                        toastMiddle('支付成功')
                        setTimeout(function () {
                            vm.getUserOrderDetail()
                        }, 500)
                    },
                    payFail() {
                        toastMiddle('支付失败')
                    },
                    operateOrder(title, operation, id, msg) {
                        api.confirm({
                            title: title,
                            buttons: ['确定', '取消']
                        }, function(ret, err) {
                            if (ret.buttonIndex == 1) {
                                order(operation)(id, function(ret){
                                    toastMiddle(msg);
                                    api.sendEvent({name: 'refreshOrderList'});
                                    if(operation == 'deleteUserOrder'){
                                        setTimeout(()=>{
                                            api.closeWin();
                                        },1200)
                                    }else{
                                        vm.getUserOrderDetail();
                                    }
                                })
                            }
                        });
                    },
                    viewLogistics(id, type) {
                        api.openWin({
                            name: 'my_logistics_win',
                            url: 'my_logistics_win.html',
                            bounces: false,
                            pageParam: {orderId : id, type: type}
                        });
                    },
                    changeLogistics(id, type) {
                        order('seeLogistics')({id: id, type: type},function(ret){
                            if (ret.data.length === 0) {
                                api.openFrame({
                                    name: 'return_logistics',
                                    url: 'widget://html/common/return_logistics_frm.html',
                                    rect: {
                                        marginTop: 0,
                                        marginBottom: 0,
                                        w: 'auto',
                                    },
                                    pageParam: {
                                        id: id
                                    },
                                    softInputMode: 'pan'
                                })
                            } else {
                                vm.viewLogistics(id, type)
                            }
                        })
                    },
                },
            })
            api.addEventListener({
                name: 'orderType'
            }, function(ret, err) {
                var active = ret.value.active
            });
        }
    </script>
</body>

</html>